<template>
  <el-container class="container">
    <el-card class="card" body-style="background: #fff; padding: 0px;">
      <h4 class="title">账号登录</h4>
      <el-form :model="user" ref="form" :size="size">
        <el-form-item label="账号">
          <el-input
              v-model="user.account"
              @blur="validateName"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input
              type="password"
              v-model="user.password"
              @blur="validatePassword"
          ></el-input>
        </el-form-item>

        <div class="button-container">
          <el-button type="primary" @click="login" class="animated-button">登录</el-button>
          <el-button @click="register" class="animated-button">注册</el-button>
        </div>
      </el-form>
    </el-card>
  </el-container>
</template>

<script setup lang="ts">
import apis from "../http/apis";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {storeToRefs} from "pinia";
import {useUserStore} from "../stores/user.ts";
import {openMainWindow} from "../actions/open_main_window.ts";
import {getCurrentWindow} from "@tauri-apps/api/window";

const size = 'small';
let {userInfo} = storeToRefs(useUserStore())
let user = ref({
  account: '',
  password: '',
  token: ''
});
let nameError = ref('');
let passwordError = ref('');
function validateName() {
  nameError.value = user.value.account ? '' : '请输入账号';
}
function validatePassword() {
  passwordError.value = user.value.password ? '' : '请输入密码';
}
function validateFields() {
  validateName();
  validatePassword();
  let res = nameError.value === '' && passwordError.value === '';
  if (!res) {
    ElMessage.error(nameError.value || passwordError.value);
  }
  return res;
}

function login() {
  if (validateFields()) {
    //处理登录逻辑
    apis.login(user.value).then(res => {
      let token = res;
      if (token) {
        user.value.token = token;
        openMainWindow(user.value);
      } else {
        // 登录失败
        ElMessage.error('用户名或密码错误');
      }
    }, error => {
      ElMessage.error('系统开小差了，请稍后再试');
      console.error(error);
    })

  }
}

function register() {
  if (validateFields()) {
    apis.register(user.value).then(res => {
      let success = res.success;
      //处理注册逻辑
      if (success) {
        // 注册成功
        ElMessage.success('注册成功，请登录');
      } else {
        // 注册失败
        ElMessage.error('注册失败,用户名已存在,请重新注册');
      }
    }, error => {
      ElMessage.error(error.response);
    })
  }
}
</script>

<style scoped>
.button-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  padding: 0 20px 0 20px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.9);
  animation: bounce 2s infinite;
}

.title {
  text-align: center;
  color: #ff69b4;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.animated-input {
  transition: border-color 0.3s, box-shadow 0.3s;
}

.animated-input:focus {
  border-color: #ff69b4;
  box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.animated-button {
  transition: transform 0.2s, background-color 0.3s;
}

.animated-button:hover {
  transform: scale(1.1);
  background-color: #ff1493;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
</style>
